<template>
  <el-tabs style="height: 100%">
    <!-- <el-tab-pane :label="item.nickName" v-for="(item, index) in dataList" :key="index">
      {{ item.nickName }}
    </el-tab-pane> -->
    <!-- <template>
      <slot></slot>
    </template> -->
    <!-- <template> -->
    <!-- <el-tab-pane :label="item.nickName" v-for="(item, index) in dataList" :key="index">
      <slot name="content">
        {{ item.nickName }}
      </slot>
    </el-tab-pane> -->
    <!-- <template v-slot="scope">
      <slot :name="item.slotName" :row="scope.row" :index="index">
        {{ scope.row[item.prop] }}
      </slot>
    </template> -->
    <el-tab-pane
      v-for="(item, index) in dataList"
      :key="index"
      class="tab-item"
    >
      <template #label>
        <slot name="label" :row="item" :index="index"></slot>
      </template>
      <slot name="content" :row="item" :index="index"> ddd </slot>
    </el-tab-pane>

    <!-- </template> -->
  </el-tabs>
</template>

<script lang="ts" setup>
import { defineProps, PropType } from "vue"
import { IChatState, friedsLists } from "@/store/chat/types"
// const props = defineProps({
//   // dataList<T>: {
//   //   // type: Array as PropType<T>,
//   //   default: () => [],
//   // },
//   // dataList:
//   type: {
//     type: String,
//   },
// });

const props = defineProps({
  dataList: {
    type: Array as PropType<friedsLists[]>,
    default: () => []
  }
})
</script>

<style lang="less">
.tab-item {
  margin-top: 20vh;
}

.el-tabs--right.el-tabs--card .el-tabs__item.is-right {
  padding-top: 3vh;
  padding-bottom: 5vh;
  box-sizing: border-box;
}
</style>
